import React from 'react'
import { Toast } from 'antd-mobile'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import { actions as newsActionCraetors } from '../../redux/modules/news'
import config from '../../../config';
import './detail.less';

class Detail extends React.PureComponent {

  static contextTypes = {
    router: React.PropTypes.object.isRequired
  }

  state = {
    
  }

  componentDidMount() {
    const id = this.props.params.id
    this.fetchDetail(id)
    this.addView(id)
  }

  render() {
    return <section className="article-page">
      <div className="main-title">
        {this.state.Title}
        {this.state.Rank == 1 && <span className="tag top">顶</span>}
      </div>
      <div className="sub">
        <span>{this.state.LastUpdateDate}</span>
        <span><i className="iconfont icon-yanjing"/>{this.state.ViewCount}</span>
      </div>
      <div className="content" dangerouslySetInnerHTML={{ __html: this.state.Text }}></div>
    </section>
  }

  fetchDetail(id) {
    this.props.actions.fetchDetail({id}, json => {
      if (json.IsSuccess) {
        this.setState({
          ...json.Data
        })
      } else {
        Toast.info(json.Msg, 1);
      }
      
    })
  }

  addView(id) {
    this.props.actions.addView({id}, json => {
      console.log(json)
    })
  }

}

const stateToProps = state => ({
  ...state.news
})

const dispatchToProps = dispatch => ({
  actions: bindActionCreators(newsActionCraetors, dispatch)
})

export default connect(stateToProps, dispatchToProps)(Detail);
